<!DOCTYPE html>
<html lang="en">
<!---
https://cdn.bootcdn.net/ajax/libs/three.js/0.166.1/three.module.js
比如安装148版本
npm install three@0.148.0 save
-->
<head>
    <meta charset="UTF-8">
    <title>cube-001</title>
    <script type="importmap">
        {
          "imports": {
            "three": "./js/threejs/three.module.js",
            "three/addons/": "./js/jsm/"
          }
        }
    </script>
<style>
body {
    margin: 0;
}
canvas {
    display: block;
}
#tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: none;
    /* 默认隐藏 */
    pointer-events: none;
    font-size: 12px;
    white-space: break-spaces;
    z-index: 1;
}
</style>
</head>
<body>
<!-- 创建用于显示提示的文本元素 -->
<div id="tooltip" onclick="tooltipCkick"></div>
<script type="module">
  import * as THREE from "./js/threejs/three.module.js";
  import { OrbitControls } from './js/threejs/jsm/controls/OrbitControls.js';
  import {drawCubeByPlanes,drawCubeByPlane,regHover, regClick} from "./js/draw/three.cube.js";

  function tooltipCkick(e) {
    console.warn(e)
  }
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000)

  const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.x = 400;
  camera.position.y = 100;
  camera.position.z += 800;


  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, 800);
  // 渲染器能够渲染阴影效果
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  // 添加网格辅助器
  const gridHelper = new THREE.GridHelper(5000, 50); // 创建一个200单位的网格，细分为50个方格
  gridHelper.rotation.x = 0.5 * Math.PI
  scene.add(gridHelper);

  // 方向光
  const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
  directionalLight.position.set(10, 10, 10);

  directionalLight.shadow.mapSize.width = 1024  // default
  directionalLight.shadow.mapSize.height = 1024  // default
  directionalLight.shadow.camera.near = 0.05  // default
  directionalLight.shadow.camera.far = 500  // default
  //将范围调大
  directionalLight.shadow.camera.top = 20 /// 这个是生效的属性
  directionalLight.shadow.camera.right = 20
  directionalLight.shadow.camera.left = -20
  directionalLight.shadow.camera.bottom = -20
  directionalLight.castShadow = true;
  scene.add(directionalLight);

  // 环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 2);
  scene.add(ambientLight);

  // 添加鼠标控制
  const controls = new OrbitControls(camera, renderer.domElement);
  // controls.enableDamping = true; // 使得相机移动更加平滑
  controls.dampingFactor = 0.05; // 阻尼效果

  // 添加 XYZ 坐标轴 (红: X, 绿: Y, 蓝: Z)
  const axesHelper = new THREE.AxesHelper(16);  // 参数表示轴的长度
  scene.add(axesHelper);

  // 添加箭头
  const arrowSize = 0.1;  // 箭头大小
  const arrowHeadLength = 0.15; // 箭头头部长度
  const arrowHeadWidth = 0.1;  // 箭头头部宽度

  // X 轴箭头 (红色)
  const xArrow = new THREE.ArrowHelper(
      new THREE.Vector3(1, 0, 0),   // 方向 (沿 X 轴)
      new THREE.Vector3(4, 0, 0),   // 起点 (X 轴末端)
      arrowSize,                    // 箭头长度
      0xff0000,                     // 红色
      arrowHeadLength,              // 箭头头部长度
      arrowHeadWidth                // 箭头头部宽度
  );
  scene.add(xArrow);

  // Y 轴箭头 (绿色)
  const yArrow = new THREE.ArrowHelper(
      new THREE.Vector3(0, 1, 0),   // 方向 (沿 Y 轴)
      new THREE.Vector3(0, 4, 0),   // 起点 (Y 轴末端)
      arrowSize,                    // 箭头长度
      0x00ff00,                     // 绿色
      arrowHeadLength,              // 箭头头部长度
      arrowHeadWidth                // 箭头头部宽度
  );
  scene.add(yArrow);

  // Z 轴箭头 (蓝色)
  const zArrow = new THREE.ArrowHelper(
      new THREE.Vector3(0, 0, 1),   // 方向 (沿 Z 轴)
      new THREE.Vector3(0, 0, 4),   // 起点 (Z 轴末端)
      arrowSize,                    // 箭头长度
      0x0000ff,                     // 蓝色
      arrowHeadLength,              // 箭头头部长度
      arrowHeadWidth                // 箭头头部宽度
  );
  scene.add(zArrow);

  var optCubes = [
    {type:'Z' ,points : [{x:0  ,y:0  },{x:60 ,y:0  },{x:60 ,y:60 },{x:0  ,y:60 }],indices:null,opt:{name:'柱1'}},
    {type:'Z' ,points : [{x:820,y:0  },{x:880,y:0  },{x:880,y:60 },{x:820,y:60 }],indices:null,opt:{name:'柱2'}},
    {type:'Z' ,points : [{x:820,y:390},{x:880,y:390},{x:880,y:450},{x:820,y:450}],indices:null,opt:{name:'柱3'}},
    {type:'Z' ,points : [{x:0  ,y:390},{x:60 ,y:390},{x:60 ,y:450},{x:0  ,y:450}],indices:null,opt:{name:'柱4'}},
    {type:'L' ,points : [{x:60 ,y:0  },{x:820,y:0  },{x:820,y:60 },{x:60 ,y:60 }],indices:null,opt:{name:'梁5'}},
    {type:'LQ',points : [{x:820,y:60 },{x:880,y:60 },{x:880,y:390},{x:820,y:390}],indices:null,opt:{name:'梁墙6'}},
    {type:'LQ',points : [{x:60 ,y:390},{x:820,y:390},{x:820,y:450},{x:60 ,y:450}],indices:null,opt:{name:'梁墙7'}} ,
    {type:'LQ',points : [{x:0  ,y:60 },{x:60 ,y:60 },{x:60 ,y:390},{x:0  ,y:390}],indices:null,opt:{name:'梁墙8'}}        ,
    {type:'L' ,points : [{x:390,y:60 },{x:450,y:60 },{x:450,y:390},{x:390,y:390}],indices:null,opt:{name:'梁9'}}	
  ]
  drawCubeByPlanes(scene,optCubes)

  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();

  var cubes = new Array()
  regHover(camera, scene, cubes)
  regClick(camera, scene, cubes)
</script>

</body>
</html>
